<template>
	<div class="myChart" ref="myChart"></div>
</template>

<script setup>
	import {
		ref,
		defineProps,
		onMounted
	} from "vue"
	import * as echarts from "echarts";
	let myChart = ref()
	const props = defineProps({
		option:{
			type:Object,
			default:null
		}
	})
	onMounted(() => {
		console.log(myChart?.value,20)
		// var chartDom = myChart.value
		var myCharts = echarts.init(myChart?.value);
		console.log(props.option,22)
		myCharts.setOption(props.option);
		//图形宽度随屏幕宽度改变而改变
		 window.onresize = myCharts.resize;
	})

	

	
</script>

<style scoped>
	.myChart{
		width: 100%;
		height: 100%;
	}
</style>